<template>
  <div style="height: 60vh">
    <el-col :span="8">
      <!-- 搜索 clearable:清空数据，@clear:查询数据-->
      <el-input v-model="xx" placeholder="请输入简称，如：'INTJ'"
        ><template #append>
          <el-button @click="getpercent()"
            ><el-icon><Search /></el-icon
          ></el-button>
        </template>
      </el-input>
    </el-col>
    <br>
    <br>

    <div>
    </div>
    <div id="main" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { ref ,onMounted } from "vue";
export default {
  data() {
    return {
      percent: "0",
      mal: "",
      chartData:[],
      xx: ref(""),
    };
  },
  created() {
    this.getpercent();
  },
mounted(){
    this.init()
},
  methods: {
    getpercent() {
      if (this.xx != "") {
        const that = this;
        this.$axios
          .get("/getper", { params: { xx: this.xx } })
          .then(function (response) {
            that.percent = response["data"]["per"];
            that.mal = response["data"]["mal"];
            var obj = {name:response["data"]["mal"],value:response["data"]["per"]}
            that.chartData.push(obj)
            that.init()
          });
      }
    },
    init() {
      const that = this;
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '人群占比如下：'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    series: [
      {
        name: '人群占比',
               type: "pie", // type设置为饼图
        data:that.chartData
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
  },
};
</script>

<style scoped>
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
</style>